<%@ page import="static com.test.ws.s1.utils.Res.fileUrl" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: M1523
  Date: 2025/3/20
  Time: 11:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false"  %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>顽石旅行网</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
<!--      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
     <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>-->
    <![endif]-->
    <style>
    	.topbar{position:relative}
    	.hottel,.haslogin{position:absolute;top:12px;right:50px}
    	.hottel p{cursor:pointer;font-weight:700;float:left;width:100px;border:1px solid orange;text-align:center;height:45px;line-height:45px;margin-right:10px}
    	.hottel a{color:#666;text-decoration:none}
    	.haslogin{top:45px;right:0}
    	.haslogin p{font-weight:700;float:left;margin-right:30px;font-size:18px}

        #avatar {
            width: 60px; /* 调整宽度 */
            height: 60px; /* 调整高度 */
            border-radius: 50%; /* 使图片变成圆形 */
            border: 2px solid #ccc; /* 改变边框颜色 */
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* 改变阴影效果 */
            transition: transform 0.2s; /* 添加过渡效果 */
            margin-top: -20px; /* 向上移动15px */
        }

        #avatar:hover {
            transform: scale(1.1); /* 鼠标悬停时放大 */
        }


    </style>
</head>
<body>
	<!--引入头部-->
    <!-- 头部 start -->
    <header id="header">
        
        <div class="header_wrap">
            <div class="topbar">
                <div class="logo">
                    <a href="/"><img src="images/logo.png" style="height: 60px;" alt=""></a>
                </div>
                <div class="search">
                    <form action="${pageContext.request.contextPath}/search">
                        <input name="action" type="text" placeholder="请输入路线名称" class="search_input" autocomplete="off" value="">
                        <input type="submit" name="" value="搜索"  class="search-button">
                    </form>
                </div>

                <c:if test="${qttx == null}">
                    <div class="hottel">
                        <a href="${pageContext.request.contextPath}/dl"><p>登录</p></a>
                        <a href="${pageContext.request.contextPath}/zc"><p>注册</p></a>
                    </div>
                </c:if>

                <c:if test="${qttx != null}">
                    <div class="haslogin">
                        <p>
                            <a href="${pageContext.request.contextPath}/zx">
                                <img id="avatar" src="<%=fileUrl%>${qttx.user_tx}" alt="Avatar">
                            </a>
                        </p>
                        <p><a href="${pageContext.request.contextPath}/tuiChuDengLu">退出登录</a></p>
                    </div>
                </c:if>

            </div>
        </div>
    </header>
    <!-- 头部 end -->
    <!-- 首页导航 -->
    <div class="navitem">
        <ul class="nav">
            <%--栏目--%>
            <c:forEach items="${lanmu}" var="classif">
                <li><a href="${pageContext.request.contextPath}/classIfChass?id=${classif.classif_id}">${classif.classif_name}</a></li>
            </c:forEach>
<%--                <li><a href="${pageContext.request.contextPath}/scphb">收藏排行榜</a></li>--%>
        </ul>
    </div>

    <!-- banner start-->
    <section id="banner">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="2000">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>、
            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <c:forEach items="${routeLunBo}" var="item" varStatus="status">
                    <div class="item ${status.first ? 'active' : ''}"> <!-- 动态添加 active -->
                        <img src="<%=fileUrl%>${item.route_img}" alt="轮播图">
                    </div>
                </c:forEach>
            </div
            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
			    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
			    <span class="sr-only">Previous</span>
			  </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
			    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
			    <span class="sr-only">Next</span>
			  </a>
        </div>
    </section>
    <!-- banner end-->
    <!-- 旅游 start-->
    <section id="content">
         <!-- 顽石精选start-->
        <section class="jx">
            <div class="jx_top">
                <div class="jx_tit">
                    <img src="images/icon_5.jpg" alt="">
                    <span>自然风光</span>
                </div>
            </div>
            <div class="jx_content">
                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="popularity">
                        <div class="row">
                            <c:forEach items="${routeChaZiRan}" var="item">
                                <div class="col-md-3">
                                        <%--进入详情页面--%>
                                    <a href="${pageContext.request.contextPath}/classIfChassa?id=${item.route_id}">
                                        <img src="<%=fileUrl%>${item.route_img}" alt="" style="height: 150px">
                                        <div class="has_border">
                                            <h3>${item.route_js}</h3>
                                            <div class="price">网付价<em>￥</em><strong>${item.route_price}</strong><em>起</em></div>
                                        </div>
                                    </a>
                                </div>
                            </c:forEach>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- 顽石精选end-->
        <!-- 国内游 start-->
        <section class="jx">
            <div class="jx_top">
                <div class="jx_tit">
                    <img src="images/icon_6.jpg" alt="">
                    <span>主体游</span>
                </div>
            </div>
            <div class="jx_content">
                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="popularitys">
                        <div class="row">
                            <c:forEach items="${routeChaZhuTi}" var="item">
                                <div class="col-md-3">
                                        <%--进入详情页面--%>
                                    <a href="${pageContext.request.contextPath}/classIfChassa?id=${item.route_id}">
                                        <img src="<%=fileUrl%>${item.route_img}" alt="" style="height: 150px">
                                        <div class="has_border">
                                            <h3>${item.route_js}</h3>
                                            <div class="price">网付价<em>￥</em><strong>${item.route_price}</strong><em>起</em></div>
                                        </div>
                                    </a>
                                </div>
                            </c:forEach>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- 国内游 end-->
        <!-- 境外游 start-->
        <section class="jx">
            <div class="jx_top">
                <div class="jx_tit">
                    <img src="images/icon_7.jpg" alt="">
                    <span>名胜古迹</span>
                </div>
            </div>
            <div class="jx_content">
                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="popularityse">
                        <div class="row">
                            <c:forEach items="${routeChaMenShi}" var="item">
                                <div class="col-md-3">
                                        <%--进入详情页面--%>
                                    <a href="${pageContext.request.contextPath}/classIfChassa?id=${item.route_id}">
                                        <img src="<%=fileUrl%>${item.route_img}" alt="" style="height: 150px">
                                        <div class="has_border">
                                            <h3>${item.route_js}</h3>
                                            <div class="price">网付价<em>￥</em><strong>${item.route_price}</strong><em>起</em></div>
                                        </div>
                                    </a>
                                </div>
                            </c:forEach>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- 境外游 end-->
    </section>
    <!-- 旅游 end-->
    <!--导入底部-->
    <!-- 尾部 start-->
    <footer id="footer">
        <div class="company">
            <p>顽石教育有限公司 版权所有Copyright 2019-2020, All Rights Reserved 京ICP备12390</p>
        </div>
    </footer>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery-3.3.1.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <!--导入布局js，共享header和footer-->
    <script type="text/javascript" src="js/include.js"></script>
</body>
</html>